<template>
  <v-form ref="form" class="form px-7 pt-6 pb-15">
    <v-row class="line" no-gutters>
      <v-col class="label" :cols="4"> Info Code </v-col>
      <v-col :cols="8" class="text-left">
        <v-card flat width="30%">
          <v-text-field
            v-model="infoCode"
            v-validate="{ required: true }"
            name="info code"
            required
            solo
            hide-details
            dense
            class="white-input input-text"
          >
          </v-text-field>
        </v-card>
        <span class="vee-validate-error">{{ errors.first("info code") }}</span>
      </v-col>
    </v-row>
    <v-row class="line" no-gutters>
      <v-col class="label" :cols="4"> Info Description </v-col>
      <v-col :cols="8" class="text-left">
        <v-text-field
          v-model="infoDescription"
          v-validate="{ required: true }"
          name="info description"
          required
          solo
          hide-details
          dense
          class="white-input input-text"
        ></v-text-field>
        <span class="vee-validate-error">
          {{ errors.first("info description") }}
        </span>
      </v-col>
    </v-row>
  </v-form>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import VForm from "vuetify/src/components/VForm/index";
import { Pick } from "@/common/constants/Utils";
@Component({
  props: {},
})
export default class AddEditMessageInfo extends Vue {
  // form
  id: string | null = "";
  infoCode: string | null = "";
  infoDescription: string | null = "";

  setFormData(formData: object) {
    Object.assign(this, formData);
  }

  resetForm() {
    this.id = null;
    type VFormInstance = InstanceType<typeof VForm>;
    const formRef = this.$refs.form as VFormInstance;
    formRef.reset();
  }

  async validateFormData() {
    const valid: boolean = await this.$validator.validate();
    if (valid) {
      return this.getFormData();
    } else {
      return false;
    }
  }

  getFormData() {
    return Pick(this, ["id", "infoCode", "infoDescription"]);
  }
}
</script>
<style lang="scss">
@import "@/components/Maintenance/Dialog/DialogForm.scss";
</style>
